<!--
 * @Author: your name
 * @Date: 2021-04-25 09:13:45
 * @LastEditTime: 2021-04-25 13:50:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \day8\myapp\src\App.vue
-->
<template>
  <div id="app">
    <div class="footer">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <div class="main">
      <router-view/>
    </div>
    
  </div>
</template>

<style lang="scss">
*{
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

html,body,#app{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.footer{
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: space-around;
  align-items: center;
  a{
    text-decoration:none;
    color: #000;
  }
  .router-link-exact-active{
    color: red;
  }
}
</style>
